<template>
  <div id="app">
    <!-- 头部topbar -->
    <Topbar :key="topBarkey"></Topbar>
    <!-- 头部导航部分 -->
    <Header></Header>
    <!-- 内容区域 -->
    <router-view />
    <!-- 底部 -->
    <Footer></Footer>
    <!-- 登录 -->
    <Login v-show="isShowLoginModal"></Login>
    <!-- 弹框组件 -->
    <!-- 增加过渡效果 -->
    <transition name="slide">
      <Toast v-show="isShowToast"></Toast>
    </transition>
  </div>
</template>

<script>
import Topbar from "@/components/Topbar";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import Login from "@/components/Login.vue"
import Toast from "@/components/Toast.vue"
import {JingPinAPI,ReMenAPI} from "./request/api";
import {mapState} from "vuex"
export default {
  components: {
    Topbar,
    Header,
    Footer,
    Login,
    Toast
  },
  data(){
    return {
      topBarkey:0
    }
  },
  watch:{
     "$route.path":{
       handler(newVal,oldVal){
         if (newVal != oldVal) {
           console.log("key变化了");
           this.topBarkey++;
         }
       }
     }
  },
  computed:{
    ...mapState({
      isShowLoginModal:state => state.showModal.isShowLoginModal,
      isShowToast: state => state.showToast.isShowToast
    })
  },
  // created() {
  //   axios
  //     .get("http://kumanxuan1.f3322.net:8881/cms/products/recommend")
  //     .then((res) => {
  //       console.log(res.data);
  //     })
  //     .catch((err) => {
  //       console.log(err);
  //     });
  // },
  //   项目中一般不会单个组件中引入。
  // 1. 地址每次都是很长一段，一旦后续修改，改动地方也会增多 （接口管理）
  // 2. 每次都需要设置请求头携带token （请求头）
  // 3. 请求a完成后再请求b出现回调地狱  （回调地狱）
  async created() {
    // axios.get("/products/recommend").then( (res) => {
    //   console.log(res);
    // });

    // JingPinAPI().then(res => {
    //   console.log(res);
    // })
    // ReMenAPI().then(res => {
    //   console.log(res);
    // })
    let res = await JingPinAPI();
    console.log("res",res);
        let res1 = await ReMenAPI();
    console.log("res",res1);
  },

};
</script>

<style lang="less" scoped>
.slide-enter, .slide-leave-to{
  opacity: 0;
}

.slide-enter-active, .slide-leave-active{
  transition: opacity 1s linear;
}

.slide-enter-to, .slide-leave{
  opacity: 1;
}
</style>
